<template>
  <div>
    <!--<viewhand :deleteids="this.needid"></viewhand>-->
    <el-dialog title="关联设备" :visible.sync="dialogVisible">
      <el-form :inline="true" :model="getEquipList">
        <el-form-item label="出厂编号:" label-width="75">
          <el-input v-model="getEquipList.data.condition.equip_cid" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备名称:" label-width="75">
          <el-select class="equipSelect" v-model="getEquipList.data.condition.name" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in nameData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型:" label-width="45">
          <el-select class="equipSelect" v-model="getEquipList.data.condition.type" clearable filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="型号:" label-width="45">-->
        <!--<el-select class="equipSelect" v-model="search.model" filterable placeholder="请选择">-->
        <!--<el-option-->
        <!--v-for="item in options"-->
        <!--:key="item.value"-->
        <!--:label="item.label"-->
        <!--:value="item.value">-->
        <!--</el-option>-->
        <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item>
          <el-button class="bottonQuery" type="primary" @click="getEquipValue()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="allEquipData" stripe fit highlight-current-row
                style="width: 100%;" height="541" :header-cell-style="{background:'#F7F8F9'}" @selection-change="equipChangeFun">
        <el-table-column
          type="selection"
          width="45"
          align="center"
          @selection-change="equipChangeFun">
        </el-table-column>
        <el-table-column
          prop="equip_cid"
          label="出厂编号"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          prop="name_label"
          label="设备名称"
          width="195">
        </el-table-column>
        <el-table-column
          prop="type_label"
          label="类型"
          sortable
          width="200">
        </el-table-column>
        <el-table-column
          prop="brand_label"
          label="品牌"
          width="200">
        </el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="189">
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="CurrentChanges"
          @size-change="SizeChanges"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next"
          :total="totals">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="clears" @click="dialogVisible = false">取 消</el-button>
        <el-button class="bottonConfirm" type="primary" @click="selectionDevice()">确 定</el-button>
      </div>
    </el-dialog>
    <div class="organizationOutMore">
      <el-form :inline="true" :model="overview" class="demo-form-inline">
        <div class="sitetitle">站点列表</div>
        <el-form-item class="handItem" label="站点编号:">
          <el-input class="handInput" v-model="overview.data.condition.pid"></el-input>
        </el-form-item>
        <el-form-item class="handItem" label="站点名称:">
          <el-input class="handInput" v-model="overview.data.condition.name"></el-input>
        </el-form-item>
        <el-form-item class="handItem">
          <el-button type="primary" @click="queryData()">查询</el-button>
        </el-form-item>
        <el-form-item class="handItem">
          <el-button class="clear" type="primary" @click="returnEquipValue()">重置</el-button>
        </el-form-item>
        <el-form-item class="handItem" style="float: right">
          <el-button class="indieWidth" type="primary" @click="onSubmit"><router-link :to="{path:'/managementSide/mSiteAdmin/addSite'}"><i class="el-icon-plus"></i>新增</router-link></el-button>
          <el-button type="primary" class="clear" @click="deletemore"><i class="el-icon-delete"></i>批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="organizationTable">
      <div class="pagination-container footerPage">
        <el-pagination
          @current-change="CurrentChange"
          @size-change="SizeChange"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <el-table :data="siteList" stripe fit highlight-current-row height="790"
                style="width: 100%; margin-top: 0px" :header-cell-style="{background:'#F7F8F9'}" @selection-change="moreDelete">
        <el-table-column type="selection" align="center" width="40" @selection-change="moreDelete"></el-table-column>
        <el-table-column
          prop="pid"
          label="站点编号"
          sortable
          :show-overflow-tooltip="true"
          width="180">
        </el-table-column>
        <el-table-column
          prop="station_name"
          label="站点名称"
          sortable
          :show-overflow-tooltip="true"
          width="250">
        </el-table-column>
        <el-table-column
          prop="project"
          label="所属项目"
          sortable
          :show-overflow-tooltip="true"
          min-width="250">
        </el-table-column>
        <el-table-column
          prop="equip_name"
          label="出厂编号"
          sortable
          :show-overflow-tooltip="true"
          width="250">
        </el-table-column>
        <el-table-column
          label="操作"
          width="220">
          <template slot-scope="scope">
            <el-button @click.native.prevent="lookRow(scope.$index, scope.row)" class="tableIcon" type="text" title="查看" size="small">
              <img :src="detail" alt="查看"/>
            </el-button>
            <el-button @click.native.prevent="editRow(scope.$index, scope.row)" class="tableIcon" type="text" title="编辑" size="small">
              <img :src="redact" alt="编辑"/>
            </el-button>
            <div class="delete">
              <el-button  type="text" class="" title="删除" @click.native.prevent="open2(scope.$index, scope.row)">
                <img :src="wraningDelete" alt="删除"/>
              </el-button>
            </div>
            <orgdelete></orgdelete>
            <el-dropdown trigger="click" class="overviewDropdown">
              <span class="el-dropdown-link">
                更多操作<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-button class="associatedbuttom" type="button" @click.native.prevent="rolePopup(scope.$index, scope.row)">配置与查询</el-button>——————
                <el-button class="associatedbuttom" type="button" @click.native.prevent="deviceContext(scope.$index, scope.row)">关联设备</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import orgdelete from '@/views/managementSide/mSiteAdmin/components/delete'
  import axios from 'axios'
  import detail from '@/assets/reports/detail_normal.png'
  import redact from '@/assets/reports/redact_normal.png'
  import wraningDelete from '@/assets/reports/delete_normal.png'
  export default {
    components: {
      orgdelete
    },
    data() {
      return {
        detail,
        redact,
        wraningDelete,
        dialogVisible: false,
        allEquipData: [],
        templateRadio: [],
        nameData: [],
        activeName: 'second',
        options: '',
        siteListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        siteList: [],
        multipleSelection: [],
        total: 0,
        totals: 0,
        ids: '1',
        listLoading: true,
        needid: [''],
        overview: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_overview',
          data: {
            condition: {
              pid: '',
              name: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        delSubmitData: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_del',
          ids: ['default1']
        },
        delsite: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_del',
          ids: []
        },
        getEquipType: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_crane_type'
        },
        getEquipList: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_manage_condition',
          data: {
            condition: {
              cid: '',
              equip_cid: '',
              cids: [],
              cid_filter: [],
              name: '',
              name_label: '',
              brand: '',
              model: '',
              equip_class: '',
              annual_trial_remind: 0,
              type: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        getOnceEquip: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_get',
          pid: ''
        },
        editSiteEquip: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_mod',
          data: {
            pid: '',
            name: '',
            project_no: '',
            equip_no: '',
            asset_no: ''
          }
        },
        getEquipName: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_crane_name'
        }
      }
    },
    created() {
      this.queryData()
    },
    mounted() {
    },
    methods: {
      rolePopup(index, rows) {
        var roleid = rows.pid
        var name = rows.station_name
        this.$router.push({
          path: '/managementSide/mSiteAdmin/configurationAndQuery/index',
          query: {
            pid: roleid,
            name: name
          }
        })
      },
      deviceContext(index, rows) {
        this.getOnceEquip.pid = rows.pid
        this.editSiteEquip.data.pid = rows.pid
        this.editSiteEquip.data.name = rows.station_name
        axios.post('/station', this.getOnceEquip, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.editSiteEquip.data.project_no = res.data.data.project_no
          this.getEquipList.data.condition.cid_filter = []
          this.getEquipList.data.condition.cid_filter.push(res.data.data.equip.cid)
          this.getEquipValue()
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
          })
        axios.post('/basicdata', this.getEquipName, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.nameData = res.data.datas
        })
          .catch((error) => {
            console.log(error)
          })
      },
      getEquipValue() {
        axios.post('/equipmanage', this.getEquipList, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.allEquipData = res.data.data.items
          this.totals = parseInt(res.data.data.page.total)
        })
          .catch(function(error) {
            console.log(error)
          })
        axios.post('/basicdata', this.getEquipType, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.options = res.data.datas
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
          })
        this.dialogVisible = true
      },
      equipChangeFun(val) {
        this.templateRadio = val
      },
      selectionDevice() {
        if (this.templateRadio.length === 0) {
          this.$message.error('请勾选一个设备')
        } else if (this.templateRadio.length > 1) {
          this.$message.error('只允许选择一个设备')
        } else {
          this.editSiteEquip.data.equip_no = this.templateRadio[0].cid
          console.log(this.editSiteEquip)
          axios.post('/station', this.editSiteEquip, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.queryData()
            this.dialogVisible = false
          })
            .catch((error) => {
              this.$message.error(error.data.errmsg)
            })
        }
      },
      // 跳转查看编辑
      lookRow(index, rows) {
        console.log(rows)
        var looknumber = rows.pid
        this.$router.push({
          path: '/managementSide/mSiteAdmin/lookSite',
          query: {
            pid: looknumber
          }
        })
      },
      // 跳转组织编辑
      editRow(index, rows) {
        var editnumber = rows.pid
        this.$router.push({
          path: '/managementSide/mSiteAdmin/editSite',
          query: {
            pid: editnumber
          }
        })
      },
      handleSizeChange(val) {
        this.siteListQuery.limit = val
        this.getsiteList()
      },
      handleCurrentChange(val) {
        this.siteListQuery.page = val
        this.siteList()
      },
      returnEquipValue() {
        this.overview.data.condition.pid = ''
        this.overview.data.condition.name = ''
        this.queryData()
      },
      queryData() {
        // 站点总览
        axios.post('/station', this.overview, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.siteList = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.overview.data.page.page_number = (val) + ''
        this.queryData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.overview.data.page.page_size = (pageSize) + ''
        this.queryData()
      },
      // 当前页
      CurrentChanges(val) {
        this.getEquipList.data.page.page_number = (val) + ''
        this.getEquipValue()
      },
      // 每页显示多少条
      SizeChanges(pageSize) {
        this.getEquipList.data.page.page_size = (pageSize) + ''
        this.getEquipValue()
      },
      // 查询
      onSubmit() {
        this.queryData()
      },
      // 单个删除
      open2(index, rows) {
        console.log(rows)
        if (rows.project) {
          this.$message.error('请先取消关联项目!')
        } else {
          if (rows.equip_name) {
            this.$message.error('请先取消关联相关设备及网关!')
          } else {
            var deleteid = []
            deleteid.push(rows.pid)
            this.delsite.ids = deleteid
            this.$confirm('确认删除站点？', '提示', {
              cancelButtonClass: 'userCancel',
              confirmButtonClass: 'userConfirm',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then((res) => {
              axios.post('/station', this.delsite, {
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                }
              }).then((res) => {
                if (res.data.errcode === '00000') {
                  this.delsite.ids = []
                  this.$message({
                    type: 'success',
                    message: '删除成功'
                  })
                }
                this.queryData()
              })
            }).catch(() => {
            })
          }
        }
      },
      // 获取多选项
      moreDelete(val) {
        this.multipleSelection = val
        var deletemoreid = []
        for (var i = 0; i < this.multipleSelection.length; i++) {
          deletemoreid.push(this.multipleSelection[i].pid)
        }
        this.delsite.ids = deletemoreid
      },
      // 多个删除
      deletemore() {
        if (this.delsite.ids.length === 0) {
          this.$message.error('请勾选要删除的站点!')
        } else {
          this.$confirm('确认删除站点？', '提示', {
            cancelButtonClass: 'userCancel',
            confirmButtonClass: 'userConfirm',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((res) => {
            axios.post('/station', this.delsite, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }).then((res) => {
              this.delsite.ids = []
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.queryData()
            })
          }).catch(() => {
          })
        }
      }
    }
}
</script>

<style scoped>
  /*顶部start*/
  .organizationOutMore{
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    padding-top: 5px;
    padding-left: 20px;
    border-bottom: 1px solid #e0e0e0;
  }
  .sitetitle {
    float: left;
    color: #323842;
    font-size: 14px;
    font-weight: bold;
    margin-top: 12px;
    margin-right: 40px;
  }
  /deep/ label {
    font-weight: normal;
    color: #69727E;
  }
  /deep/ .handItem {
    margin-bottom: 5px!important;
  }
  /deep/ .indieWidth {
    padding: 6px 8px;
  }
  /deep/ .reset {
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
  }
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  /*/deep/ .el-button--primary {*/
    /*height: 30px;*/
    /*font-size: 14px;*/
    /*padding: 6px 16px;*/
    /*background: #25B6C7;*/
    /*border-color: #25B6C7;*/
  /*}*/
  /deep/ .clear{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    line-height: 0px;
  }
  /deep/ .export {
    background: #fff;
    border: 1px solid #0072F3;
    color: #0072F3;
  }
  /deep/ .el-icon-delete {
    height: 16px;
    line-height: 12px;
  }
  /deep/ .el-icon-delete:before {
    font-size: 16px;
    color: #fff;
  }
  /deep/ .userCancel {
    color: #fff;
    background-color: #526D89;
  }
  /deep/ .userCancel:hover {
    color: #fff;
    background-color: #526D89;
  }
  /*/deep/ .el-message-box{*/
    /*width: 540px;*/
  /*}*/
  /*/deep/ .el-message-box__header{*/
    /*background-color: #E3E6EE;*/
    /*padding: 10px 15px;*/
  /*}*/
  /*/deep/ .el-message-box__title{*/
    /*font-size: 18px;*/
    /*font-weight: Bold;*/
    /*color: #323842;*/
  /*}*/
  /*/deep/ .el-message-box__status{*/
    /*right: 247px;*/
    /*top: 65px;*/
    /*font-size: 48px !important;*/
  /*}*/
  /*/deep/ .el-message-box__status.el-icon-warning{*/
    /*color: #E53D41;*/
  /*}*/
  /*/deep/ .el-message-box__content{*/
    /*height: 182px;*/
  /*}*/
  /*/deep/ .el-message-box__message p {*/
    /*margin: 0;*/
    /*font-size: 18px;*/
    /*color: #323842;*/
    /*padding-top: 96px;*/
    /*text-indent: 0px;*/
    /*text-align: center;*/
  /*}*/
  /*/deep/ .el-message-box__headerbtn{*/
    /*top: 9px;*/
    /*font-size: 18px;*/
  /*}*/
  /*/deep/ .el-message-box__btns{*/
    /*padding: 10px 15px 7px ;*/
    /*border-top: 1px solid #e8eaf1;*/
  /*}*/
  /*顶部end*/
  /deep/ .organizationTable{
    width: 100%;
    min-height: 500px;
    background-color: #fff;
  }
  /deep/ .tableIcon {
    padding: 0px;
    font-size: 20px;
    font-weight: 500;
  }
  /deep/ .overviewDropdown {
    width:74px;
    margin-left: 5px;
    top: -4px;
    cursor: pointer;
  }
  /deep/ .el-dropdown-link {
    font-size: 10px;
    padding:2px;
    color: #0072F3;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 12px;
    width: 98px;
    color: #e0e0e0;
  }
  .el-dropdown-menu {
    margin-top: 12px;
    width: 98px;
    color: #e0e0e0;
  }
  /deep/ .el-button--text {
    color: #0072F3;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid #E3E3E3;
  }
  /deep/ .el-table--border th {
    padding: 3px;
  }
  .el-table::before {
    width: 0px;
    height: 0px;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  /deep/ .delete {
    display: inline;
    margin-left: 5px;
  }
  /deep/ .associatedbuttom {
    text-align: left;
    color: #323842;
    border: none;
    margin-left: 5px;
    padding: 10px;
    height: 24px;
    width: 88px;
    font-size: 12px;
  }
  /deep/ .associatedSearch{
    width: 240px;
    float: left;
    height: 30px;
  }
  /deep/ .associatedDelete{
    float: right;
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .associatedDelete .el-icon-delete {
    color: #ffffff;
    font-size: 15px;
  }
  /deep/ .associatedNew{
    float: right;
    margin-bottom: 10px;
    height: 30px;
  }
  /deep/ .associatedbuttom:hover {
    color: #0072F3;
  }
  /deep/ .footerPage{
    float: right;
    margin: 5px 0px;
  }
  /deep/ .el-message-box{
    width: 540px;
  }
  /deep/ .el-message-box__header{
    background-color: #E3E6EE;
    padding: 10px 15px;
  }
  /deep/ .el-message-box__title{
    font-size: 18px;
    font-weight: Bold;
    color: #323842;
  }
  /deep/ .el-message-box__status{
    right: 247px;
    top: 65px;
    font-size: 48px !important;
  }
  /deep/ .el-message-box__status.el-icon-warning{
    color: #E53D41;
  }
  /deep/ .el-message-box__content{
    height: 182px;
  }
  /deep/ .el-message-box__message p {
    margin: 0;
    font-size: 18px;
    color: #323842;
    padding-top: 96px;
    text-indent: 0px;
    text-align: center;
  }
  /deep/ .el-message-box__headerbtn{
    top: 9px;
    font-size: 18px;
  }
  /deep/ .el-message-box__btns{
    padding: 10px 15px 7px ;
    border-top: 1px solid #e8eaf1;
  }
  /deep/ .el-icon-delete{
    padding: 0;
    font-size: 20px;
    color: #d97159;
  }
  /deep/ .el-icon-delete:hover{
    color: #d97159;
  }
  /deep/ .el-icon-delete:focus{
    color: #d97159;
  }
  /deep/ .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  /deep/ .el-dialog{
    width: 750px;
    min-height: 700px;
    border-radius: 4px;
  }
  /deep/ .el-dialog__header{
    width:1050px;
    height:39px;
    border-radius: 4px 4px 0 0;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    background-color: #E3E6EE;
  }
  /deep/ .el-dialog__headerbtn{
    top: 12px;
  }
  /deep/ .el-dialog__body{
    padding: 9px 20px;
  }
  /deep/ .el-dialog__footer {
    padding: 20px;
    padding-top: 10px;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  /deep/ .gutter {
    background: #D8DEE8;
  }
  /*dialogStyle*/
  /deep/ .el-input__inner {
    height: 30px;
  }
  /deep/ .clears{
    padding: 6px 16px;
    background-color: #526D89;
    border-color: #526D89 ;
    color: #fff;
    float: right;
    margin-left: 10px;
  }
  /deep/ .bottonQuery {
    margin-top: 6px;
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
  }
  /deep/ .returnQuery {
    margin-top: 6px;
    padding: 6px 16px;
    float: right;
    border:1px solid #0F1516;
    color: #fff;
    background-color: #0F1516;
  }
  /deep/ .bottonConfirm {
    padding: 6px 16px;
    float: right;
    border:1px solid #0072F3;
    background: #0072F3;
  }
  /deep/ .equipSelect {
    width: 135px;
  }
  /deep/ .el-dialog {
    border-radius: 5px;
    width: 1050px;
  }
  /deep/ .el-dialog__header {
    background: #E3E6EE;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px 9px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  /deep/ .el-dialog__headerbtn {
    top: 15px;
  }
  /deep/ .el-dialog__body {
    padding: 20px;
    height: 665px;
  }
  /deep/ .el-dialog__footer {
    height: 50px;
    border-top: 1px solid #DCDFE6;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  /deep/ .el-table__header-wrapper {
    height: 40px;
  }
  /deep/ .el-table--border {
    height: 500px;
  }
  /deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    padding: 0px;
  }
  /deep/ .el-table th {
    padding: 4px 0px;
  }
  /deep/ .el-table td {
    padding: 3px 0px;
    font-weight: normal;
  }
  /deep/ .block {
    margin-top: 5px;
    height:15px;
  }
  /deep/ .el-pagination {
    float: right;
  }
  /deep/ .relation {
    float: right;
    height: 30px;
    font-size: 14px;
    padding: 6px 16px;
    color: #fff;
    background: #0072F3;
    border-color: #0072F3;
  }
  /deep/ .gutter {
    background: #D8DEE8;
  }
</style>
